@extends('layouts.header')
@section('title','安全工器具中控平台')
@section('head')
    <meta http-equiv="Cache-Control" content="max-age=7200000"/>
@endsection
@section('style')
    body{
    height:100%;
    overflow:hidden;
    background-color:#000;
    background: url('/admin/static/myfolder/img/zks/back.png') no-repeat;
    background-size:100% 100%;
    color:#fff;
    font-size:100%;
    line-height:2;
    }
    .bg-dark{
    background-color:#fff;
    background: url('/admin/static/myfolder/img/zks/border1.png') no-repeat;
    background-size:100% 100%;
    }
    .bg-mid-dark{
    background-color:#fff;
    background: url('/admin/static/myfolder/img/zks/border2.png') no-repeat;
    background-size:100% 100%;
    }

    table > thead > tr > th  {
    font-size:110%;
    color: rgb(17, 208, 201);
    font-weight: bold;
    letter-spacing:2px;
    }
    table > tbody > tr {
    background-color: rgb(1, 75, 132);
    }

    .cell-title{
    letter-spacing:3px;
    color: rgb(17, 208, 201);
    margin-top:-10px;
    }

    @media(max-height:710px){
    #bodyDiv
    {
    margin-top:-20px;
    }
    }

    {{--  layer.open 弹窗背景--}}
    .shadows{background-color: transparent !important;box-shadow: 0 0 0 rgba(0,0,0,0) !important;}

    {{--    去掉闪白--}}
    .layui-layer-load {
    background: url(/admin/lib/layer/2.4/skin/default/loading-0.gif) center center no-repeat;
    }

    {{--    设置矩形标题--}}
    .parallelogram {
    width: 125px;
    height: 100px;
    transform: skew(340deg);
    }

    .slider .bd,.slider .bd li,.slider .bd iframe{width:100%; height:300px}

    .iframeDiv{
    width: 80%;height: 80%;margin: 0 auto;
    }
    .iframeTitle{
    margin-top:-5px;
    }
    td > span{
    display:block;
    text-overflow: ellipsis;
    -moz-text-overflow: ellipsis;
    white-space:nowrap;
    overflow: hidden;
    }

    table {
    table-layout: fixed;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    -moz-text-overflow: ellipsis;
    white-space: nowrap;
    }

    .toMid{
    margin-top:10%;
    }

    .zujian{
    overflow:hidden;
    }

    #warn_shade{
    background: rgba(30, 30, 30,0.5);
    }
    .alarm-text{
    margin-top: 50px;
    font-size: 130px;
    font-family: '楷体';
    }
    .detail-text{
    color: #3596ff;
    }
    #warning_shade{
    margin-top: 160px;
    }
@endsection
@section('content')
    <div id="bodyDiv" style="height: 100%;">
        {{--左边--}}
        <div class="page-container col-lg-3" style="height: 100%;">
            <div style="width: 98%;height: 100%;">
                <div class="row mt-30" style="height: 30%;">
                    <div class="bg-dark mt-10 zujian" style="height: 100%;">
                        <h3 class="text-c mr-20 cell-title" style="color: orange;">{{date('m月d日')}} &nbsp; {{"周".["日","一","二","三","四","五","六"][date("w")]}}</h3>
                        <div class="text-c" style="height: 72%; margin:0 8%;overflow: hidden;" >
                            <table style="border-collapse:separate; border-spacing:0 5px;">
                                <thead>
                                <tr>
                                    <th class="text-c col-xs-3">位置</th>
                                    <th class="text-c col-xs-3"><img src="/admin/static/myfolder/img/weather/temp.png" alt="温度" title="温度" style="width:30%;"></th>
                                    <th class="text-c col-xs-3"><img src="/admin/static/myfolder/img/weather/hum.png" alt="湿度" title="湿度" style="width:30%;"></th>
                                    <th class="text-c col-xs-3"><img src="/admin/static/myfolder/img/weather/pres.png" alt="大气压" title="大气压" style="width:30%;"></th>
                                </tr>
                                </thead>
                                <tbody class="tb-left" id="hb6303">
                                @foreach($data['hb6303'] as $item)
                                    <tr id="hb6303_{{$item->dev_num}}">
                                        <input type="hidden" name="url" value="hb6303/{{$item->id}}">
                                        <td class="text-c c-white col-xs-3">{{$item->pos}}</td>
                                        <td class="text-c c-white col-xs-3 temp">{{$item->temp ?: '/'}}</td>
                                        <td class="text-c c-white col-xs-3 humi">{{$item->humi ?: '/'}}</td>
                                        <td class="text-c c-white col-xs-3 humi">{{$item->pressure ?: '/'}}</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                @for($i=1;$i<3;$i++)
                    <div class="row hoverRows" style="height: 30%;">
                        <b class="r Hui-iconfont Hui-iconfont-arrow1-right toMid" data-order="{{$i}}"></b>
                        <div class="bg-dark zujian mt-10 text-c" style="height: 100%;">
                            <div id="tab_{{$i}}" class="HuiTab">
                                @php
                                    $dataN = $data['order'][$i];
                                @endphp
                                <div class="tabBar clearfix cell-title col-xs-10 col-xs-offset-1">
                                    @foreach($dataN as $item)
                                        <span class="parallelogram" data-tomid="{{$data[$item]['toMid']}}" data-key="{{$data[$item]['key']}}">{{$data[$item]['title']}}</span>
                                    @endforeach
                                </div>
                                @foreach($dataN as $vN)
                                    @php $content = $data[$vN]['content']; @endphp
                                    <div class="tabCon ml-10 mt-10 ">
                                        @if($vN === 'users')
                                            <div class="users" id="{{$vN}}">
                                                @foreach($content as $item)
                                                    <div class="col-xs-3" onclick="page_open(this)">
                                                        <input type="hidden" name="url" value="{{$data[$vN]['url']}}/{{$item->id}}">
                                                        <span>{{$item->val1 ?: $item->val2}}</span>
                                                        @if($item->val3)
                                                            <img src="/admin/static/myfolder/img/zks/cert.png">
                                                        @endif
                                                    </div>
                                                @endforeach
                                            </div>
                                        @else
                                            @if($vN == 'stationPcShare')
                                                @component('admin.zks.component.stationPcShare',['content'=>$content,'dataId'=>$vN,'width'=>'100%','height'=>'100%']) 无可查看共享屏幕 @endcomponent
                                            @elseif($vN == 'vcr')
                                                @component('admin.zks.component.vcr',['content'=>$content,'dataId'=>$vN,'width'=>'400px','height'=>'200px']) 无可查看录像 @endcomponent
                                            @else
                                                <div class="tabCon ml-10 mt-10 ">
                                                    <div style="height: 60%;margin:0 8%;"  id="{{$vN}}">
                                                        <table style="border-collapse:separate; border-spacing:0 5px;">
                                                            <thead>
                                                            <tr>
                                                                <th class="text-c col-xs-2">{{$data[$vN]['column'][0]}}</th>
                                                                <th class="text-c col-xs-7">{{$data[$vN]['column'][1]}}</th>
                                                                <th class="text-c col-xs-3">{{mb_substr($data[$vN]['column'][2],0,4)}}</th>
                                                            </tr>
                                                            </thead>
                                                            <tbody class="tb-left">
                                                            @foreach($data[$vN]['content'] as $k => $item)
                                                                <tr class="hidden">
                                                                    <input type="hidden" name="url" value="{{$data[$vN]['url']}}/{{$item->id}}">
                                                                    <td class="text-c c-white col-xs-2">{{$k+1}}</td>
                                                                    <td class="text-l c-white col-xs-7"><span class="overText">{{$item->val1}}</span></td>
                                                                    <td class="text-c c-white col-xs-3"><span class="overText">{{$item->val2}}</span></td>
                                                                </tr>
                                                            @endforeach
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            @endif
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endfor
            </div>
        </div>
        {{--    中间--}}
        <div class="page-container col-lg-6 text-c" style="height: 98%;margin-top:40px;">
            <h1 class="mt-30 cell-title">{{$zksTitle}}</h1>
            <div class="bg-mid-dark zujian" style="height:86%;overflow: hidden;margin-top: 1%;">
                <div id="tab_3" class="HuiTab" style="height: 100%;">
                    @php
                        $data3 = $data['order'][3];
                    @endphp
                    <div class="tabBar clearfix cell-title col-xs-8 col-xs-offset-2" style="margin-top:-1%;">
                        @foreach($data3 as $item)
                            <span class="parallelogram" data-tomid="{{$data[$item]['toMid']}}" data-key="{{$data[$item]['key']}}">{{$data[$item]['title']}}</span>
                        @endforeach
                    </div>

                    @foreach($data3 as $k1=> $v3)
                        @php
                            $v3count = count($data[$v3]['content']);
                            $content = $data[$v3]['content'];
                        @endphp
                        <div class="tabCon" style="height: 100%;">
                            <div style="height: 90%;margin:1% 2% 1% 3%;" id="{{$v3}}">
                                @if($v3 == 'stationPcShare')
                                    @component('admin.zks.component.stationPcShare',['content'=>$content,'dataId'=>$v3,'width'=>'100%','height'=>'700px']) 无可查看共享屏幕 @endcomponent
                                @elseif($v3 == 'vcr')
                                    @component('admin.zks.component.vcr',['content'=>$content,'dataId'=>$v3,'width'=>'95%','height'=>'720px']) 无可查看录像 @endcomponent
                                @else
                                    <table style="border-collapse:separate; border-spacing:0px 5px;">
                                        <thead>
                                        <tr>
                                            @foreach($data[$v3]['column'] as $k => $val)
                                                <th class="text-c">{{$val}}</th>
                                            @endforeach
                                        </tr>
                                        </thead>
                                        <tbody class="tb-mid">
                                        @foreach($content as $k=>$item)
                                            <tr class="hidden">
                                                <input type="hidden" name="url" value="{{$data[$v3]['url']}}/{{$item->id}}">
                                                <td class="c-white"><span>{{$k+1}}</span></td>
                                                <td class="c-white"><span>{{$item->val1}}</span></td>
                                                <td class="c-white"><span>{{$item->val2}}</span></td>
                                                <td class="c-white"><span>{{$item->val3}}</span></td>
                                                <td class="c-white"><span>{{$item->val4}}</span></td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                @endif
                            </div>
                            <strong style="font-size: 130%;">{{$data[$v3]['title']}}</strong>
                        </div>
                    @endforeach

                </div>
            </div>
        </div>
        {{--    右边--}}
        <div class="page-container col-lg-3" style="height: 100%;">
            <div class="r" style="width: 98%;height: 100%;">
                @for($i=4;$i<6;$i++)
                    <div class="row hoverRows @if($i==4) mt-50 @else mt-20 @endif" style="height: 45%;">
                        <b class="l Hui-iconfont Hui-iconfont-arrow1-left toMid" data-order="{{$i}}"></b>
                        <div class="bg-dark mt-10 text-c " style="height: 100%;">
                            @php
                                $dataN = $data['order'][$i][0];
                                $content = $data[$dataN]['content'];
                            @endphp
                            <h3 class="text-c mr-20 cell-title">
                                <span class="parallelogram current" data-tomid="{{$data[$dataN]['toMid']}}" data-key="{{$data[$dataN]['key']}}">{{$data[$dataN]['title']}}</span>
                            </h3>
                            @if($dataN == 'stationPcShare' || $dataN == 'vcr')
                                @component("admin.zks.component.$dataN",['content'=>$content,'dataId'=>$dataN,'width'=>'85%','height'=>'380px']) 空 @endcomponent
                            @else
                                <div style="height: 90%;margin:0 8%;overflow-y: hidden;" id="{{$dataN}}">
                                    <table style="border-collapse:separate; border-spacing:0 5px;" >
                                        <thead>
                                        <tr>
                                            <th class="text-c col-xs-2">{{$data[$dataN]['column'][0]}}</th>
                                            <th class="text-c col-xs-7">{{$data[$dataN]['column'][1]}}</th>
                                            <th class="text-c col-xs-3">{{$data[$dataN]['column'][2]}}</th>
                                        </tr>
                                        </thead>
                                        <tbody class="tb-right">
                                        @foreach($data[$dataN]['content'] as $k => $item)
                                            <tr class="hidden">
                                                <input type="hidden" name="url" value="{{$data[$dataN]['url']}}/{{$item->id}}">
                                                <td class="text-c c-white col-xs-2">{{$k+1}}</td>
                                                <td class="text-c c-white col-xs-7"><span>{{$item->val1}}</span></td>
                                                <td class="text-c c-white col-xs-3">{{$item->val2}}</td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            @endif
                        </div>
                    </div>
                @endfor
            </div>
        </div>
    </div>
    <div id="warn_shade" hidden style="height: 100%;" class="text-c">
        <img id="warning_shade" src="/tvshow/cn/images/iconfont/warn-red.png" alt="">
        <h1 class="alarm-text">库房烟雾报警</h1>
        <video id="video" muted autoplay src="/tvshow/cn/images/mp3/smoke-warn.mp3"></video>
        <button hidden type="button" id="unmuteButton">Click Me!</button>
        <audio id="bgmusic" loop=true src="/tvshow/cn/images/mp3/smoke-warn.mp3" controls="controls"></audio>
    </div>
    <input type="text" id="btn" style="width: 0; height: 0;position: absolute; left: -100000">
    <script src="/admin/lib/jquery.SuperSlide/2.1.1/jquery.SuperSlide.min.js"></script>
    <script src="/admin/lib/jquery/clipboard.min.js"></script>
    <script>
        var winWidth, winHeight, toHeight, toFontSize, toSpace,timers={},timerIndex=0,addr=@json($data['addr']),data=@json($data),changeData=['contract','tester','expire','stations','client'],tab_xun_interval=[],smoke_warning;
        // console.log(data);
        $(function () {
            $('iframe').each(function(i,item) {
                var id = $(this).attr('id'),
                    src = $(this).attr('src');
                if(src && src != undefined){
                    IframeOnClick.track(document.getElementById(id), function(){
                        // window.open(src,"_blank"); //跳转是写在了IframeOnClick方法里面，不是在这里
                    });
                }
            })
            //每3秒获取一次烟雾报警状态
            setInterval(function () {
                get_smoke_status();
            }, 3000);

            slide();

            for (let i = 1; i < 7; i++) {
                $('#tab_' + i).Huitab();
            }

            $('.toMid').hide();
            // if(addr.length > 0){
            //     addr = JSON.parse(addr);
            //     if (addr.status !== 0) {
            //         layer.msg('地址获取失败');
            //         return false;
            //     }
            //     $('#weather-area').text(addr.content.address);
            //     ajax('get', 'https://devapi.qweather.com/v7/weather/now?key=b53bf235be9a425697374c3b4bbc2f67&location=' + addr.content.point.x + ',' + addr.content.point.y, '', getWeather, 0,0);
            // }

            tabXun();

            //适配全屏
            reFullSize();
            $(window).on("resize", function () {
                reFullSize();
            });

            //3min重新请求一次数据
            setInterval(function () {
                ajax('get','getContent',{},getContentBak,0,0);
            }, 180000);
            setInterval(function () {
                ajax('get','getEnvInfo',{},getEnvInfoBak,0,0);
            }, 30000);
        })
        function getEnvInfoBak(res) {
            for(let dev_num in res){
                $('#hb6303_'+dev_num).find('.temp').text(res[dev_num].temp);
                $('#hb6303_'+dev_num).find('.humi').text(res[dev_num].humi);
            }
        }
        function getContentBak(res) {
            $.each(res,function (id) {
                if ($.inArray(id,changeData)) {
                    var length = $('#'+id).find('thead tr th').length,
                        content =  res[id]['content'],
                        html = '',
                        no = 1;
                    for(let i in content){
                        let item = content[i];
                        // console.log(item);
                        if (length == 5) {
                            html += '<tr class="hidden">'+
                                '<input type="hidden" name="url" value="'+res[id]['url']+'/'+item['id']+'">'+
                                '<td class="c-white"><span>'+no+'</span></td>'+
                                '<td class="c-white"><span>'+item['val1']+'</span></td>'+
                                '<td class="c-white"><span>'+item['val2']+'</span></td>'+
                                '<td class="c-white"><span>'+item['val3']+'</span></td>'+
                                '<td class="c-white"><span>'+item['val4']+'</span></td>'+
                                '</tr>';
                        }else if(length == 3){
                            html += '<tr class="hidden">'+
                                '<input type="hidden" name="url" value="'+res[id]['url']+'/'+item['id']+'">'+
                                '<td class="text-c c-white col-xs-2">'+no+'</td>'+
                                '<td class="text-c c-white col-xs-7"><span>'+item['val1']+'</span></td>'+
                                '<td class="text-c c-white col-xs-3">'+item['val2']+'</td>'+
                                '</tr>';
                        }
                        no += 1;
                    }
                    $('#'+id).find('tbody').html(html);
                }
            })
            reloadList();
        }
        function reloadList() {
            slide();
            reFullSize();
            tabXun();
        }
        function slide() {
            $(".slider-3 .slider").slide({mainCell: ".bd ul", titCell: ".hd li", trigger: "click", effect: "leftLoop", autoPlay: true, delayTime: 1000, interTime: 30000, pnLoop: false, titOnClassName: "active"})
        }
        function get_smoke_status() {
            $.ajax({
                url: '/api/chu/getSmokeStatus',
                success: function (res) {
                    if (res == '1') {
                        if (smoke_warning) {
                            clearInterval(smoke_warning);
                        }
                        $('#bgmusic')[0].play();
                        $('#bodyDiv').css('display', 'none');
                        $('#warn_shade').css('display', 'block');
                        var i = 1;
                        smoke_warning = setInterval(function () {
                            console.log(i);
                            if (i % 3 !== 0) {
                                i++;
                                $('#warning_shade').attr('src', '/tvshow/cn/images/iconfont/warn-red.png');
                            } else {
                                $('#warning_shade').attr('src', '/tvshow/cn/images/iconfont/warn-white.png');
                                i = 1;
                            }
                        }, 500);
                    }
                }
            });
        }

        $("div").on('click',function (event) {
            let src = $(this).data('src');
            if(src){
                if (src.indexOf('?') > 0) {
                    src += '&from=click';
                }else{
                    src += '?from=click';
                }
                window.open(src);
            }
        })

        function tab_xun(tb_class,length){
            if (tab_xun_interval[tb_class]) {
                clearInterval(tab_xun_interval[tb_class]);
            }
            $(tb_class).each(function () {
                $(this).children('tr').each(function(index){
                    if(index < length){
                        $(this).removeClass('hidden').addClass('tr_show');
                    }else{
                        return false;
                    }
                })
            })
            tab_xun_interval[tb_class] = setInterval(function () {
                $(tb_class).each(function () {
                    if ($(this).children('tr').length > length) {
                        let next = $(this).find('tr.tr_show:last').next();
                        if (next.length === 0) {
                            $(this).append('<tr onclick="page_open(this)" class="tr_show" style="height:' + toHeight + ';line-height: ' + toHeight + '; " >' + $(this).find('tr:first').html() + '</tr>');
                            $(this).find('tr:first').remove();
                            next = $(this).find('tr.tr_show:last').next();
                        }
                        next.removeClass('hidden').addClass('tr_show');
                        $(this).find('tr.tr_show:first').removeClass('tr_show').addClass('hidden');
                    }
                })
            },3000);
            // console.log(tab_xun_interval);
        }
        // 将两边的数列调到中间
        $('.toMid').on('click', function () {
            let toOrder = [
                $('#tab_3').find('.tabBar').find('.current').data('key'),
                $(this).closest('.hoverRows').find('.current').data('key')
            ];
            ajax('post', 'setOrder', {order: toOrder}, toMidBak, 0);
            function toMidBak(res) {
                window.location.reload();
            }
        })

        $('.hoverRows').hover(function () {   //移入
            $('.toMid').hide();
            $(this).css('zoom', '98%');
            if ($(this).find('.current').data('tomid') === 1) {
                $(this).find('.toMid').show();
            }
        }, function () {      //移出
            $('.toMid').hide();
            $(this).css('zoom', '100%');
        })

        $('.parallelogram').on('click', function () {
            if ($(this).data('tomid') === 1) {
                $(this).closest('.hoverRows').find('.toMid').show();
            } else {
                $(this).closest('.hoverRows').find('.toMid').hide();
            }
        })

        //弹窗
        function page_open(ele,url='',perW=0.6,perH=0.8) {
            url = (url != '' ? url : $(ele).find('input[name=url]').val());
            let w = winWidth * perW,
                h = winHeight * perH;
            // url = 'contract/210008';
            let perContent = layer.open({
                type: 2,
                area: [w + 'px', h + 'px'],
                fix: false, //不固定
                // maxmin: true,
                move: true,
                shade: 0.4,
                skin: 'shadows',  //定义一个类名 可修改弹框透明等样式
                title: false,
                content: url + '?tb_height=' + h * 0.8,
                anim: 0,
                isOutAnim: false,//关闭层时的过度动画
                resize: true,//是否允许右下角拖动来拉伸
                moveOut: true,//是否允许拖拽到窗口外
            });
            if ($(window).width() < 768) {
                layer.full(perContent);
            }
        }

        function reFullSize() {
            winWidth = $(window).width();
            winHeight = $(window).height();
            toHeight = Math.floor(35 * winHeight / 957) + 'px';
            toFontSize = Math.floor(100 * winHeight / 1000) + '%';
            toSpace = Math.floor(5 * winHeight / 1080) + 'px';
            //＜1000不适配
            winWidth < 1000 ? ($('body > div').addClass('hidden') && layer.msg('不支持1280以下的宽度适配')) : $('body > div').removeClass('hidden');   //适应宽度
            // $('#weather-detail').css('zoom',(winWidth/1920*100)+'%');
            //设置天气zoom
            $('#weather-detail').css('zoom', Math.floor(100 * winWidth / 1920) + '%');
            //tr适配（文字和tr高度）
            $('tr').each(function () {
                $(this).css('height', toHeight).css('line-height', toHeight);
                $(this).children('td').each(function () {
                    $(this).css('font-size', toFontSize);
                })
            })
            //表格中的间距适配
            $('table').each(function () {
                $(this).css('border-spacing', '0 ' + toSpace);
            })
            //组件中的标题栏适配
            $('.tabBar').each(function () {
                let bgWidth = $(this).closest('.zujian').width(),
                    childrens = $(this).children('.parallelogram'),
                    widthss = Math.floor((bgWidth * 0.5) / (childrens.length)) + 'px';
                $(childrens).css('width', widthss);
            })

            //用户模块设置列数
            $('.users').children('div').each(function () {
                $(this).css('font-size', toFontSize);
            })
            $('.vcr').each(function () {
                $(this).children('li').each(function (i) {
                    if(i > 0){
                        $(this).addClass('hidden');
                    }
                })
            })
        }

        /*思路
           * 如果计算得到的最后一个id值比总数量大：
           *   取余
           *   得到同样ID的内容（并将之前的内容删除），
           *   添加到tbody中
           * 将第一个值隐藏
           * 最后一行内容显示出来
           * */
        function tabXun() {
            tab_xun('.tb-left',4); //左边表格循环播放
            tab_xun('.tb-mid',16); //左边表格循环播放
            tab_xun('.tb-right',7);   //右边表格循环播放
        }

        function getWeather(res) {
            if (res.code !== '200') {
                layer.msg('获取天气失败！');
                return false;
            }
            let now = res.now;
            // console.log(res)
            $('#weather-temp').html(now.temp + '℃');
            $('#weather-hum').text(now.humidity + '%');
            $('#weather-pres').text(now.pressure / 10 + 'kPa');
            $('#weather-wind').append(now.windScale + '级 ' + now.windSpeed + 'km/h ' + now.windDir + ' ' + now.wind360 + '度');
            $('#weather-text').html('<i class="qi-' + now.icon + '" title="' + now.text + '"></i>');
            $('#weather-time').text('观测时间：' + now.obsTime.substr(0, 10) + ' ' + now.obsTime.substr(11, 5));
        }

        $('tbody > tr').on('click', function () {
            page_open(this);
        })

        function pcshow(url) {
            $.ajax({
                type: "GET",
                cache: false,
                url: url,
                dataType: "jsonp",
                timeout: 2000,
                complete: function (res) {
                    res.status == 200 ? layer_show('主机屏幕', url) : '';
                }
            }).fail(function (jqXHR, textStatus, errorThrown) {
                // net::ERR_CONNECTION_REFUSED 发生时，也能进入
                layer.msg("主机未开启或未共享");
            });
        }

        function copyLink(url) {
            var clipboard = new Clipboard('.copy-link', {
                text: function() {
                    return url;
                }
            });
            clipboard.on('success', function(e) {
                layer.msg("复制成功，请在IE端打开！");
            });

            clipboard.on('error', function(e) {
                console.log(e);
            });
        }

        function downSoft() {
            layer.confirm('<span class="c-red">下载并安装WebComponents</span> ', {
                title: '下载', icon: 7
            }, function () {
                window.location.href = 'http://{{domain()}}/tvshow/cn/led/openIE.rar';
            })
        }

        function chgeVcr(obj,n) {
            $(obj).css('color','#82f60b').siblings().css('color','#fff');
            let vcrUl = $(obj).closest('ul').siblings('ul.vcr').children('li');
            vcrUl.addClass('hidden');
            vcrUl.eq(n).removeClass('hidden');
        }

        //iframe点击事件
        var IframeOnClick = {
            resolution: 200,
            iframes: [],
            interval: null,
            Iframe: function() {
                this.element = arguments[0];
                this.cb = arguments[1];
                this.hasTracked = false;
            },
            track: function(element, cb) {
                this.iframes.push(new this.Iframe(element, cb));
                if (!this.interval) {
                    var _this = this;
                    this.interval = setInterval(function() { _this.checkClick(); }, this.resolution);
                }
            },
            checkClick: function() {
                if (document.activeElement) {
                    var activeElement = document.activeElement;
                    for (var i in this.iframes) {
                        if (activeElement === this.iframes[i].element) {
                            document.activeElement.blur();
                            // 如果点击的是这个iframe 这个iframe处于未被点击的状态
                            if (this.iframes[i].hasTracked == false) {
                                // 标记为被点击并等待下一次点击
                                this.iframes[i].hasTracked = true;
                                // 如果200毫秒内没有被在此点击重置次状态
                                this.iframes[i].setTimeout = setTimeout(function(iframe) {
                                    iframe.hasTracked = false;
                                }, 500, this.iframes[i] );
                            } else {
                                // 如果判断这个已经是被点击的状态了
                                // 清除掉等待事件
                                clearTimeout(this.iframes[i].setTimeout);
                                // 修改为未选择状态
                                this.iframes[i].hasTracked = false;
                                // 触发事件
                                // this.iframes[i].cb.apply(window, []);   

                                if($(activeElement).attr('id').substring(0,11) == 'iframe_vcr_'){
                                    let lanip = $(activeElement).data('lanip');
                                    page_open(activeElement,'vcr/'+lanip,0.6,0.9);
                                }
                                var btn = document.getElementById("btn")
                                btn.focus();
                            }
                        } else {
                            this.iframes[i].hasTracked = false;
                        }
                    }
                }
            }
        };
    </script>
@endsection
